<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Wayback Digital Archives - Upload</title>
    <style>
        /* Basic styling for the upload interface */
        body {
            font-family: Arial, sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
        }
        
        #upload-section {
            display: none;
            margin-top: 20px;
            padding: 20px;
            border: 1px solid #ddd;
            border-radius: 5px;
            background-color: #f9f9f9;
        }
        
        #toggle-upload {
            padding: 10px 15px;
            background-color: #4CAF50;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }
        
        #upload-form {
            display: flex;
            flex-direction: column;
            gap: 15px;
        }
        
        #upload-form select, 
        #upload-form input[type="file"],
        #upload-form textarea {
            padding: 8px;
            border: 1px solid #ddd;
            border-radius: 4px;
        }
        
        #upload-form textarea {
            height: 80px;
            resize: vertical;
        }
        
        #upload-form button[type="submit"] {
            padding: 10px;
            background-color: #2196F3;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }

        
    </style>
</head>
<body>
    <h1>Wayback Digital Archives</h1>
    
    <button id="toggle-upload">Toggle Upload Panel</button>
    
    <div id="upload-section">
        <h2>Upload New Image</h2>
       <form id="upload-form" enctype="multipart/form-data">
  <select id="collection-select" required>
    <option value="">-- Select Collection --</option>
    <option value="bicycle-plates">Bicycle Plates</option>
    <option value="badges">Badges</option>
    <option value="paperwork">Paperwork</option>
    <option value="admissionletters">Admission Letters</option>
    <option value="cafeteria">Cafeteria Collection</option>
    <option value="uniforms">Uniforms Collection</option>
    <option value="souv">Souvenir Collection</option>
    <option value="rules173">Vintage BHSF Student Handbook</option>
    <option value="academichandbook">Vintage BHSF Academic Handbook</option>
  </select>
  
  <input type="file" id="image-upload" accept="image/*" required>
  
  <textarea id="image-description" 
            placeholder="Description (English/Chinese)" 
            required></textarea>
            
  <button type="submit">Upload</button>
</form>

    </div>

    <script>
        // Toggle upload panel visibility
        document.getElementById('toggle-upload').addEventListener('click', function() {
            const uploadSection = document.getElementById('upload-section');
            uploadSection.style.display = uploadSection.style.display === 'none' ? 'block' : 'none';
        });

        // Handle form submission
        document.getElementById('upload-form').addEventListener('submit', async function(e) {
            e.preventDefault();
            
            const collection = document.getElementById('collection-select').value;
            const fileInput = document.getElementById('image-upload');
            const description = document.getElementById('image-description').value;
            
            if (!fileInput.files.length) {
                alert('Please select an image file');
                return;
            }
            
            const formData = new FormData();
            formData.append('image', fileInput.files[0]);
            formData.append('collection', collection);
            formData.append('description', description);
            
            try {
                console.log('Sending upload request...');
                console.log('FormData contents:', {
                    collection: collection,
                    description: description,
                    file: fileInput.files[0] ? fileInput.files[0].name : 'No file selected'
                });
                
                const response = await fetch('/api/upload', {
                    method: 'POST',
                    body: formData
                });
                
                console.log('Response status:', response.status);
                const data = await response.json();
                console.log('Response data:', data);
                
                if (response.ok) {
                    // 显示更详细的成功信息
                    const successMessage = `
上传成功！

文件名: ${data.filename}
集合: ${collection}
描述: ${description}

请打开 vintage-objects.html 页面查看您上传的图片。
该图片将显示在 ${collection === 'paperwork' ? 'Paperwork' : collection === 'badges' ? 'Badges' : 'Bicycle Plates'} 分类中。
`;
                    alert(successMessage);
                    
                    // Reset form after successful upload
                    document.getElementById('upload-form').reset();
                    
                    // 询问是否打开vintage-objects.html页面
                    if (confirm('是否立即打开 vintage-objects.html 页面查看上传的图片？')) {
                        window.open('vintage-objects.html', '_blank');
                    }
                } else {
                    alert('Upload failed: ' + (data.error || 'Unknown error'));
                }
            } catch (error) {
                console.error('Upload error:', error);
                console.error('Error message:', error.message);
                console.error('Error name:', error.name);
                console.error('Error stack:', error.stack);
                
                // 显示更详细的错误信息
                if (error.name === 'TypeError' && error.message.includes('Failed to fetch')) {
                    alert('上传失败：无法连接到服务器。请确保服务器正在运行，并检查网络连接。');
                } else if (error.name === 'SyntaxError') {
                    alert('上传失败：服务器响应格式无效。请检查服务器日志。');
                } else {
                    alert('上传失败：' + error.message + '。请查看控制台获取详细信息。');
                }
            }
        });
    </script>
</body>
</html>
